<!--  -->
<template>
  <div>
     <h2>{{$route.query.q}}</h2>
     <div class="mvmvzu">
     <el-tabs>
    <el-tab-pane label="歌曲" name="first">
                 <table class="tablesf">
          <thead>
              <th></th>
              <th>音乐标题</th>
              <th>歌手</th>
              <th>专辑</th>
              <th>时长</th>
          </thead>
          <tbody>
         <tr>
             <td>1</td>
             <td>我爱你</td>
             <td>刘德华</td>
             <td>爱笑的你的</td>
             <td>3：000</td>
         </tr>

          </tbody>

      </table>

    </el-tab-pane>
    <el-tab-pane label="歌单" name="second">
       <div class="gedanlieb">
           <div class="gepictu">
             <p>播放量1000</p>
               <img src="../assets/01.jpg"/>
               <p>sadsadsda</p>
               <div class="annius"></div>
           </div>
    </div>
    </el-tab-pane>
    <el-tab-pane label="mv" name="third">
             <div class="gedanlieb">
           <div class="gepictu">
             <p>播放量1000</p>
               <img src="../assets/01.jpg"/>
               <p>sadsadsda</p>
               <div class="annius"></div>
           </div>
    </div> 

    </el-tab-pane>
  </el-tabs>
      
      </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name:'serchxd',
     data() {
      return {
    
      }
    },
    //生命周期钩子 created
    //回调函数，添加之后自动执行
    //内部可以通过this访问vue实例
    created(){
        axios({
         url:"https://autumnfish.cn/search",
         method:"get",
         params:{
             krywords:this.$route.query.q,
             type:1
             
         }
     }).then(res=>{
         console.log(res)
   
     })


    }
   

  
  
}

</script>
<style>
.tablesf{
  width: 100%;
}
.tablesf th{
  height: 30px;
}
.tablesf,th,td{
  border: 1px solid #000;
   border-collapse: collapse;
}
.gedanlieb{
  width: 100%;
}
.gedanlieb .gepictu{
  width: 200px;
  height: 300px;
  background: tomato;
  position: relative;
}
.gedanlieb .gepictu img{
  width: 195px;
  height: 200px;
}
.gedanlieb .gepictu .annius{
  width: 50px;
  height: 50px;
  background: turquoise;
  position: absolute;
  top:100px;
  left: 75px;
}

</style>